<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>群组管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 通用样式变量 */
    :root {
      --primary: #4263EB;
      --primary-light: #E8F0FE;
      --secondary: #6B7280;
      --success: #10B981;
      --warning: #FBBF24;
      --danger: #EF4444;
      --light: #F3F4F6;
      --dark: #1F2937;
      --white: #FFFFFF;
      --gray: #9CA3AF;
      --border: #E5E7EB;
      --shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #F9FAFB;
      color: var(--dark);
      margin: 0;
      height: 100vh;
      overflow-x: hidden;
    }
    
    /* 页面容器 */
    .group-management-container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--white);
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-btn.text-btn {
      font-size: 16px;
      width: auto;
      height: auto;
      color: var(--primary);
      font-weight: 500;
    }
    
    /* 群组头部信息 */
    .group-header {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
    }
    
    .group-info {
      display: flex;
      align-items: center;
    }
    
    .group-avatar {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      margin-right: 16px;
      object-fit: cover;
      background-color: var(--primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: var(--primary);
    }
    
    .group-details {
      flex: 1;
    }
    
    .group-name {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .group-members {
      font-size: 14px;
      color: var(--gray);
    }
    
    .group-actions {
      display: flex;
      gap: 10px;
      margin-top: 16px;
    }
    
    .action-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-secondary {
      background-color: var(--light);
      color: var(--dark);
    }
    
    .btn-danger {
      background-color: var(--danger);
      color: white;
    }
    
    /* 内容区域 */
    .page-content {
      flex: 1;
      overflow-y: auto;
    }
    
    /* 管理选项列表 */
    .management-list {
      background-color: var(--white);
      margin-bottom: 12px;
    }
    
    .list-section-title {
      padding: 12px 16px;
      font-size: 14px;
      color: var(--gray);
      border-bottom: 1px solid var(--border);
    }
    
    .management-item {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
    }
    
    .management-item:last-child {
      border-bottom: none;
    }
    
    .item-info {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    
    .item-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      background-color: var(--primary-light);
    }
    
    .item-title {
      font-size: 16px;
      font-weight: 500;
    }
    
    .item-desc {
      font-size: 13px;
      color: var(--gray);
      margin-top: 2px;
    }
    
    .item-arrow {
      color: var(--gray);
      font-size: 18px;
    }
    
    /* 成员列表 */
    .member-list {
      background-color: var(--white);
    }
    
    .member-item {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }
    
    .member-item:last-child {
      border-bottom: none;
    }
    
    .member-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .member-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .member-details {
      display: flex;
      flex-direction: column;
    }
    
    .member-name {
      font-size: 16px;
      font-weight: 500;
    }
    
    .member-role {
      font-size: 12px;
      color: var(--gray);
    }
    
    .member-action {
      color: var(--primary);
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 开关样式 */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 26px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .switch-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--light);
      transition: .3s;
      border-radius: 34px;
    }
    
    .switch-slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }
    
    input:checked + .switch-slider {
      background-color: var(--primary);
    }
    
    input:checked + .switch-slider:before {
      transform: translateX(24px);
    }
    
    /* 弹窗样式 */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
    
    .modal-backdrop.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal {
      background-color: var(--white);
      border-radius: 16px 16px 0 0;
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.3s;
    }
    
    .modal-backdrop.active .modal {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      text-align: center;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-body {
      padding: 16px;
    }
    
    .modal-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
    }
    
    .modal-btn {
      flex: 1;
      padding: 12px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      border: none;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 顶部提示 */
    .toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      background-color: var(--dark);
      color: white;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 1000;
      transition: transform 0.3s;
    }
    
    .toast.active {
      transform: translateX(-50%) translateY(0);
    }
    
    /* 风格1：默认蓝 */
    #style1 .action-btn.btn-primary {
      background-color: var(--primary);
    }
    
    /* 风格2：卡片式 */
    #style2 {
      --shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    #style2 body {
      background-color: #F0F2F5;
    }
    
    #style2 .page-header,
    #style2 .group-header {
      background-color: transparent;
      border-bottom: none;
    }
    
    #style2 .management-list,
    #style2 .member-list {
      border-radius: 16px;
      margin: 12px;
      box-shadow: var(--shadow);
    }
    
    #style2 .group-actions {
      padding: 0 12px;
    }
    
    /* 风格3：深色模式 */
    #style3 {
      --dark: #F3F4F6;
      --white: #1F2937;
      --border: #374151;
      --gray: #9CA3AF;
      --light: #374151;
      --primary-light: #2D3748;
    }
    
    #style3 body {
      background-color: #111827;
      color: var(--dark);
    }
    
    #style3 .page-header,
    #style3 .group-header,
    #style3 .management-list,
    #style3 .member-list,
    #style3 .modal {
      background-color: var(--white);
    }
    
    #style3 .list-section-title,
    #style3 .group-members,
    #style3 .item-desc,
    #style3 .member-role,
    #style3 .item-arrow {
      color: var(--gray);
    }
    
    #style3 .action-btn.btn-secondary,
    #style3 .switch-slider {
      background-color: var(--light);
      color: var(--dark);
    }
    
    #style3 .toast {
      background-color: rgba(255,255,255,0.8);
      color: var(--dark);
    }
    
    /* 风格4：简约风 */
    #style4 {
      --primary: #374151;
      --primary-light: rgba(55, 65, 81, 0.1);
    }
    
    #style4 .page-content {
      padding: 0;
    }
    
    .management-item,
    #style4 .member-item {
      padding: 14px 16px;
    }
    
    #style4 .item-icon {
      width: 24px;
      height: 24px;
      font-size: 14px;
    }
    
    #style4 .item-title {
      font-size: 15px;
    }
    
    #style4 .action-btn {
      font-size: 14px;
      padding: 9px 0;
    }
    
    #style4 .group-avatar {
      width: 56px;
      height: 56px;
      font-size: 24px;
    }

    /* 操作确认弹窗 */
    .confirm-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s;
    }
    
    .confirm-modal.active {
      opacity: 1;
      visibility: visible;
    }
    
    .confirm-content {
      background-color: var(--white);
      border-radius: 16px;
      width: 85%;
      max-width: 320px;
      padding: 24px;
      text-align: center;
    }
    
    .confirm-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .confirm-message {
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 20px;
    }
    
    .confirm-buttons {
      display: flex;
      gap: 10px;
    }
    
    .confirm-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      border: none;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
  </div>
  
  <!-- 页面容器 -->
  <div class="group-management-container">
    <!-- 风格1：默认蓝 -->
    <div id="style1" class="page-style active">
      <!-- 顶部导航 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn1">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">群组管理</h1>
        <button class="header-btn" id="moreBtn1">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <!-- 群组头部信息 -->
      <div class="group-header">
        <div class="group-info">
          <div class="group-avatar">
            <i class="fa fa-users"></i>
          </div>
          <div class="group-details">
            <div class="group-name">产品设计交流群</div>
            <div class="group-members">28名成员 · 公开群组</div>
          </div>
        </div>
        
        <div class="group-actions">
          <button class="action-btn btn-primary" id="chatBtn1">
            <i class="fa fa-comment"></i> 聊天
          </button>
          <button class="action-btn btn-secondary" id="inviteBtn1">
            <i class="fa fa-user-plus"></i> 邀请
          </button>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <div class="page-content">
        <!-- 基本设置 -->
        <div class="management-list">
          <div class="list-section-title">基本设置</div>
          
          <div class="management-item" id="editInfoItem1">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-pencil"></i>
              </div>
              <div>
                <div class="item-title">编辑群组信息</div>
                <div class="item-desc">修改名称、图标和简介</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-lock"></i>
              </div>
              <div>
                <div class="item-title">群组权限设置</div>
                <div class="item-desc">管理加入权限和内容权限</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-bell"></i>
              </div>
              <div>
                <div class="item-title">通知设置</div>
                <div class="item-desc">管理群组消息通知</div>
              </div>
            </div>
            <label class="toggle-switch">
              <input type="checkbox" checked>
              <span class="switch-slider"></span>
            </label>
          </div>
        </div>
        
        <!-- 成员管理 -->
        <div class="management-list">
          <div class="list-section-title">成员管理</div>
          
          <div class="management-item" id="manageMembersItem1">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-users"></i>
              </div>
              <div>
                <div class="item-title">管理群成员</div>
                <div class="item-desc">查看和管理所有成员</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-shield"></i>
              </div>
              <div>
                <div class="item-title">管理员设置</div>
                <div class="item-desc">设置和管理群组管理员</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 高级设置 -->
        <div class="management-list">
          <div class="list-section-title">高级设置</div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-history"></i>
              </div>
              <div>
                <div class="item-title">聊天记录</div>
                <div class="item-desc">查看和管理聊天记录</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item" id="leaveGroupItem1">
            <div class="item-info">
              <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                <i class="fa fa-sign-out"></i>
              </div>
              <div>
                <div class="item-title" style="color: var(--danger);">退出群组</div>
                <div class="item-desc">永久离开该群组</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item" id="dissolveGroupItem1" style="display: none;">
            <div class="item-info">
              <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                <i class="fa fa-trash"></i>
              </div>
              <div>
                <div class="item-title" style="color: var(--danger);">解散群组</div>
                <div class="item-desc">永久删除该群组</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 成员列表（默认隐藏，点击管理成员时显示） -->
        <div class="member-list" id="memberList1" style="display: none;">
          <div class="list-section-title">群成员 (28)</div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=1" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">张小明</div>
                <div class="member-role">群主</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=2" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">王芳</div>
                <div class="member-role">管理员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=3" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">李华</div>
                <div class="member-role">成员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=4" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">赵伟</div>
                <div class="member-role">成员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=5" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">陈静</div>
                <div class="member-role">成员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：卡片式 -->
    <div id="style2" class="page-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">群组管理</h1>
        <button class="header-btn" id="moreBtn2">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <div class="group-header">
        <div class="group-info">
          <div class="group-avatar">
            <i class="fa fa-briefcase"></i>
          </div>
          <div class="group-details">
            <div class="group-name">前端开发技术群</div>
            <div class="group-members">42名成员 · 私有群组</div>
          </div>
        </div>
      </div>
      
      <div class="page-content">
        <div class="group-actions">
          <button class="action-btn btn-primary" id="chatBtn2">
            <i class="fa fa-comment"></i> 聊天
          </button>
          <button class="action-btn btn-secondary" id="inviteBtn2">
            <i class="fa fa-user-plus"></i> 邀请
          </button>
        </div>
        
        <!-- 基本设置 -->
        <div class="management-list">
          <div class="list-section-title">基本设置</div>
          
          <div class="management-item" id="editInfoItem2">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-pencil"></i>
              </div>
              <div>
                <div class="item-title">编辑群组信息</div>
                <div class="item-desc">修改名称、图标和简介</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-lock"></i>
              </div>
              <div>
                <div class="item-title">群组权限设置</div>
                <div class="item-desc">管理加入权限和内容权限</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 成员管理 -->
        <div class="management-list">
          <div class="list-section-title">成员管理</div>
          
          <div class="management-item" id="manageMembersItem2">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-users"></i>
              </div>
              <div>
                <div class="item-title">管理群成员</div>
                <div class="item-desc">查看和管理所有成员</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 高级设置 -->
        <div class="management-list">
          <div class="list-section-title">高级设置</div>
          
          <div class="management-item" id="leaveGroupItem2">
            <div class="item-info">
              <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                <i class="fa fa-sign-out"></i>
              </div>
              <div>
                <div class="item-title" style="color: var(--danger);">退出群组</div>
                <div class="item-desc">永久离开该群组</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item" id="dissolveGroupItem2">
            <div class="item-info">
              <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                <i class="fa fa-trash"></i>
              </div>
              <div>
                <div class="item-title" style="color: var(--danger);">解散群组</div>
                <div class="item-desc">永久删除该群组</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 成员列表 -->
        <div class="member-list" id="memberList2" style="display: none;">
          <div class="list-section-title">群成员 (42)</div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=3" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">李华</div>
                <div class="member-role">群主</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=4" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">赵伟</div>
                <div class="member-role">成员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格3：深色模式 -->
    <div id="style3" class="page-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn3">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">群组管理</h1>
        <button class="header-btn" id="moreBtn3">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <div class="group-header">
        <div class="group-info">
          <div class="group-avatar">
            <i class="fa fa-graduation-cap"></i>
          </div>
          <div class="group-details">
            <div class="group-name">学习交流群</div>
            <div class="group-members">156名成员 · 公开群组</div>
          </div>
        </div>
        
        <div class="group-actions">
          <button class="action-btn btn-primary" id="chatBtn3">
            <i class="fa fa-comment"></i> 聊天
          </button>
          <button class="action-btn btn-secondary" id="inviteBtn3">
            <i class="fa fa-user-plus"></i> 邀请
          </button>
        </div>
      </div>
      
      <div class="page-content">
        <!-- 基本设置 -->
        <div class="management-list">
          <div class="list-section-title">基本设置</div>
          
          <div class="management-item" id="editInfoItem3">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-pencil"></i>
              </div>
              <div>
                <div class="item-title">编辑群组信息</div>
                <div class="item-desc">修改名称、图标和简介</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-bell"></i>
              </div>
              <div>
                <div class="item-title">通知设置</div>
                <div class="item-desc">管理群组消息通知</div>
              </div>
            </div>
            <label class="toggle-switch">
              <input type="checkbox" checked>
              <span class="switch-slider"></span>
            </label>
          </div>
        </div>
        
        <!-- 成员管理 -->
        <div class="management-list">
          <div class="list-section-title">成员管理</div>
          
          <div class="management-item" id="manageMembersItem3">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-users"></i>
              </div>
              <div>
                <div class="item-title">管理群成员</div>
                <div class="item-desc">查看和管理所有成员</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 高级设置 -->
        <div class="management-list">
          <div class="list-section-title">高级设置</div>
          
          <div class="management-item" id="leaveGroupItem3">
            <div class="item-info">
              <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                <i class="fa fa-sign-out"></i>
              </div>
              <div>
                <div class="item-title" style="color: var(--danger);">退出群组</div>
                <div class="item-desc">永久离开该群组</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 成员列表 -->
        <div class="member-list" id="memberList3" style="display: none;">
          <div class="list-section-title">群成员 (156)</div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=6" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">刘阳</div>
                <div class="member-role">群主</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=1" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">张小明</div>
                <div class="member-role">管理员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=5" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">陈静</div>
                <div class="member-role">成员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：简约风 -->
    <div id="style4" class="page-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn4">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">群组管理</h1>
        <button class="header-btn" id="moreBtn4">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <div class="group-header">
        <div class="group-info">
          <div class="group-avatar">
            <i class="fa fa-music"></i>
          </div>
          <div class="group-details">
            <div class="group-name">音乐爱好者</div>
            <div class="group-members">89名成员</div>
          </div>
        </div>
        
        <div class="group-actions">
          <button class="action-btn btn-primary" id="chatBtn4">
            <i class="fa fa-comment"></i> 聊天
          </button>
          <button class="action-btn btn-secondary" id="inviteBtn4">
            <i class="fa fa-user-plus"></i> 邀请
          </button>
        </div>
      </div>
      
      <div class="page-content">
        <!-- 基本设置 -->
        <div class="management-list">
          <div class="management-item" id="editInfoItem4">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-pencil"></i>
              </div>
              <div>
                <div class="item-title">编辑群组信息</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-lock"></i>
              </div>
              <div>
                <div class="item-title">权限设置</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
          
          <div class="management-item">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-bell"></i>
              </div>
              <div>
                <div class="item-title">通知设置</div>
              </div>
            </div>
            <label class="toggle-switch">
              <input type="checkbox" checked>
              <span class="switch-slider"></span>
            </label>
          </div>
        </div>
        
        <!-- 成员管理 -->
        <div class="management-list">
          <div class="management-item" id="manageMembersItem4">
            <div class="item-info">
              <div class="item-icon">
                <i class="fa fa-users"></i>
              </div>
              <div>
                <div class="item-title">群成员</div>
                <div class="item-desc">89人</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 高级设置 -->
        <div class="management-list">
          <div class="management-item" id="leaveGroupItem4">
            <div class="item-info">
              <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                <i class="fa fa-sign-out"></i>
              </div>
              <div>
                <div class="item-title" style="color: var(--danger);">退出群组</div>
              </div>
            </div>
            <i class="fa fa-chevron-right item-arrow"></i>
          </div>
        </div>
        
        <!-- 成员列表 -->
        <div class="member-list" id="memberList4" style="display: none;">
          <div class="list-section-title">群成员 (89)</div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=7" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">孙悦</div>
                <div class="member-role">群主</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
          
          <div class="member-item">
            <div class="member-info">
              <img src="https://picsum.photos/100/100?random=2" alt="头像" class="member-avatar">
              <div class="member-details">
                <div class="member-name">王芳</div>
                <div class="member-role">成员</div>
              </div>
            </div>
            <div class="member-action">管理</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 编辑群组信息弹窗 -->
  <div class="modal-backdrop" id="editGroupModal">
    <div class="modal">
      <div class="modal-header">
        <h3 class="modal-title">编辑群组信息</h3>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">群组名称</label>
          <input type="text" class="form-control" value="产品设计交流群">
        </div>
        
        <div class="form-group">
          <label class="form-label">群组图标</label>
          <div class="group-icon-selector" style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;">
            <div class="icon-option selected" style="width: 48px; height: 48px; background-color: #E8F0FE; color: #4263EB;">
              <i class="fa fa-users"></i>
            </div>
            <div class="icon-option" style="width: 48px; height: 48px; background-color: #FEF3C7; color: #D97706;">
              <i class="fa fa-briefcase"></i>
            </div>
            <div class="icon-option" style="width: 48px; height: 48px; background-color: #E0E7FF; color: #6366F1;">
              <i class="fa fa-graduation-cap"></i>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">群组简介</label>
          <textarea class="form-control" rows="3">产品设计交流与分享，欢迎各位设计师加入讨论。</textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="modal-btn btn-secondary" id="cancelEditBtn">取消</button>
        <button class="modal-btn btn-primary" id="saveEditBtn">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 成员管理弹窗 -->
  <div class="modal-backdrop" id="memberActionModal">
    <div class="modal">
      <div class="modal-header">
        <h3 class="modal-title">成员管理</h3>
      </div>
      <div class="modal-body">
        <div class="management-item">
          <div class="item-info">
            <div class="item-icon">
              <i class="fa fa-user-times"></i>
            </div>
            <div>
              <div class="item-title">移出群组</div>
            </div>
          </div>
          <i class="fa fa-chevron-right item-arrow"></i>
        </div>
        
        <div class="management-item">
          <div class="item-info">
            <div class="item-icon">
              <i class="fa fa-shield"></i>
            </div>
            <div>
              <div class="item-title">设为管理员</div>
            </div>
          </div>
          <i class="fa fa-chevron-right item-arrow"></i>
        </div>
        
        <div class="management-item">
          <div class="item-info">
            <div class="item-icon">
              <i class="fa fa-comment"></i>
            </div>
            <div>
              <div class="item-title">单独聊天</div>
            </div>
          </div>
          <i class="fa fa-chevron-right item-arrow"></i>
        </div>
      </div>
      <div class="modal-footer">
        <button class="modal-btn btn-secondary" id="closeMemberActionBtn">关闭</button>
      </div>
    </div>
  </div>
  
  <!-- 确认弹窗 -->
  <div class="confirm-modal" id="confirmModal">
    <div class="confirm-content">
      <div class="confirm-title">确认退出群组？</div>
      <div class="confirm-message">退出后将无法接收群组消息，需要重新邀请才能加入。</div>
      <div class="confirm-buttons">
        <button class="confirm-btn btn-secondary" id="cancelConfirmBtn">取消</button>
        <button class="confirm-btn btn-danger" id="confirmActionBtn">确认退出</button>
      </div>
    </div>
  </div>
  
  <!-- 解散群组确认弹窗 -->
  <div class="confirm-modal" id="dissolveConfirmModal">
    <div class="confirm-content">
      <div class="confirm-title">确认解散群组？</div>
      <div class="confirm-message">此操作不可撤销，群组将被永久删除。</div>
      <div class="confirm-buttons">
        <button class="confirm-btn btn-secondary" id="cancelDissolveBtn">取消</button>
        <button class="confirm-btn btn-danger" id="confirmDissolveBtn">确认解散</button>
      </div>
    </div>
  </div>
  
  <!-- 顶部提示 -->
  <div class="toast" id="toastNotification">操作成功</div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.page-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).classList.add('active');
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 返回按钮功能
    document.querySelectorAll('[id^="backBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        showToast('返回群组聊天');
      });
    });
    
    // 聊天按钮功能
    document.querySelectorAll('[id^="chatBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        showToast('进入群组聊天');
      });
    });
    
    // 邀请按钮功能
    document.querySelectorAll('[id^="inviteBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        showToast('邀请好友加入群组');
      });
    });
    
    // 编辑群组信息功能
    document.querySelectorAll('[id^="editInfoItem"]').forEach(item => {
      item.addEventListener('click', function() {
        document.getElementById('editGroupModal').classList.add('active');
      });
    });
    
    // 关闭编辑弹窗
    document.getElementById('cancelEditBtn').addEventListener('click', function() {
      document.getElementById('editGroupModal').classList.remove('active');
    });
    
    // 保存编辑
    document.getElementById('saveEditBtn').addEventListener('click', function() {
      document.getElementById('editGroupModal').classList.remove('active');
      showToast('群组信息已更新');
    });
    
    // 管理成员功能
    document.querySelectorAll('[id^="manageMembersItem"]').forEach(item => {
      item.addEventListener('click', function() {
        const styleId = this.closest('.page-style').id;
        const managementLists = this.closest('.page-content').querySelectorAll('.management-list');
        const memberList = this.closest('.page-content').querySelector(`#memberList${styleId.replace('style', '')}`);
        
        // 切换显示成员列表
        managementLists.forEach(list => {
          list.style.display = memberList.style.display === 'block' ? 'block' : 'none';
        });
        
        memberList.style.display = memberList.style.display === 'block' ? 'none' : 'block';
        
        // 更改标题
        const headerTitle = this.closest('.page-style').querySelector('.header-title');
        headerTitle.textContent = memberList.style.display === 'block' ? '群成员' : '群组管理';
      });
    });
    
    // 成员管理操作
    document.querySelectorAll('.member-action').forEach(action => {
      action.addEventListener('click', function(e) {
        e.stopPropagation();
        document.getElementById('memberActionModal').classList.add('active');
      });
    });
    
    // 关闭成员管理弹窗
    document.getElementById('closeMemberActionBtn').addEventListener('click', function() {
      document.getElementById('memberActionModal').classList.remove('active');
    });
    
    // 退出群组功能
    document.querySelectorAll('[id^="leaveGroupItem"]').forEach(item => {
      item.addEventListener('click', function() {
        document.getElementById('confirmModal').classList.add('active');
      });
    });
    
    // 取消退出
    document.getElementById('cancelConfirmBtn').addEventListener('click', function() {
      document.getElementById('confirmModal').classList.remove('active');
    });
    
    // 确认退出
    document.getElementById('confirmActionBtn').addEventListener('click', function() {
      document.getElementById('confirmModal').classList.remove('active');
      showToast('已退出群组');
      
      // 返回上一页
      setTimeout(() => {
        document.querySelector('[id^="backBtn"]').click();
      }, 1000);
    });
    
    // 解散群组功能
    document.querySelectorAll('[id^="dissolveGroupItem"]').forEach(item => {
      item.addEventListener('click', function() {
        document.getElementById('dissolveConfirmModal').classList.add('active');
      });
    });
    
    // 取消解散
    document.getElementById('cancelDissolveBtn').addEventListener('click', function() {
      document.getElementById('dissolveConfirmModal').classList.remove('active');
    });
    
    // 确认解散
    document.getElementById('confirmDissolveBtn').addEventListener('click', function() {
      document.getElementById('dissolveConfirmModal').classList.remove('active');
      showToast('群组已解散');
      
      // 返回上一页
      setTimeout(() => {
        document.querySelector('[id^="backBtn"]').click();
      }, 1000);
    });
    
    // 图标选择功能
    document.querySelectorAll('.icon-option').forEach(option => {
      option.addEventListener('click', function() {
        // 移除同组其他选项的选中状态
        this.closest('.group-icon-selector').querySelectorAll('.icon-option').forEach(opt => {
          opt.classList.remove('selected');
        });
        // 设置当前选项为选中
        this.classList.add('selected');
      });
    });
    
    // 显示提示消息
    function showToast(message) {
      const toast = document.getElementById('toastNotification');
      toast.textContent = message;
      toast.classList.add('active');
      
      setTimeout(() => {
        toast.classList.remove('active');
      }, 2000);
    }
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.page-style').forEach(style => {
      if (!style.classList.contains('active')) {
        style.style.display = 'none';
      }
    });
    
    // 为风格2的群主显示解散群组选项
    document.getElementById('dissolveGroupItem2').style.display = 'flex';
  </script>
</body>
</html>
